<template>
  <view>
    <tm-drawer
      placement="bottom"
      :width="750"
      :height="200"
      hideHeader
      v-model:show="isShow"
      @close="close"
    >
      <view class="share-content">
        <view class="weixin share-item" @tap="shareClick('weixin')">
          <tm-icon name="tmicon-weixin" :fontSize="50" color="green"></tm-icon>
          <text class="title">微信</text>
        </view>
        <view class="pengyouquan share-item" @tap="shareClick('pengyouquan')">
          <tm-icon name="tmicon-pengyouquan" :fontSize="50" color="green"></tm-icon>
          <text class="title">朋友圈</text>
        </view>
        <view class="weibo share-item" @tap="shareClick('weibo')">
          <tm-icon name="tmicon-weibo" :fontSize="50" color="red"></tm-icon>
          <text class="title">微博</text>
        </view>
      </view>
    </tm-drawer>
  </view>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from "vue";
import shareTols from "@/utils/shareTools";
const isShow = ref(false);
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  shareParams: {
    type: Object as PropType<UniNamespace.ShareOptions>
  }
});
const emits = defineEmits(["update:show"]);
function shareClick(type: string) {
  switch (type) {
    case "weixin":
      share_weixin();
      break;
    case "pengyouquan":
      share_pengyouquan();
      break;
    case "weibo":
      share_weibo();
      break;
    default:
      break;
  }
  close();
}

// 分享到微信
function share_weixin() {
  shareTols
    .share("weixin", {
      provider: "weixin",
      scene: "WXSceneSession",
      type: 2,
      imageUrl: "https://store.tmui.design/api_v2/public/random_picture?row=1&random=13"
    })
    .then(() => {});
}

// 分享到朋友圈
function share_pengyouquan() {
  shareTols
    .share("weixin", {
      provider: "weixin",
      scene: "WXSceneTimeline",
      type: 2,
      imageUrl: "https://store.tmui.design/api_v2/public/random_picture?row=1&random=13"
    })
    .then(() => {});
}

// 分享到微博
function share_weibo() {
  shareTols
    .share("sinaweibo", {
      provider: "sinaweibo",
      type: 2,
      imageUrl: "https://store.tmui.design/api_v2/public/random_picture?row=1&random=13"
    })
    .then(() => {});
}
function close() {
  emits("update:show", false);
}
watch(
  () => props.show,
  () => {
    isShow.value = props.show;
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.share-content {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .share-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10rpx 30rpx;
    .title {
      padding-top: 10rpx;
    }
  }
}
</style>
